<template>
  <div>
    <template v-for="value in this.menuData">
      <el-submenu class="tem-left" :index="value.menuName" v-if="value.items.length > 0" :key="value.name">
        <template slot="title" class="">
          <img :src="value.iconUrl" alt="">
          <span slot="title">{{value.name}}</span>
        </template>
          <MenuTree :menuData="value.items"></MenuTree>
      </el-submenu>
      <el-menu-item class="tem-left" :index="value.menuName" :key="value.name" v-else>
        <span class="tem-left" slot="title">
          <img v-if="value.iconUrl" :src="value.iconUrl" alt="">
          <span >{{value.name}}</span>
        </span>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
export default {
  props: ["menuData"],
  name: "MenuTree",
  mounted() {}
};
</script>
<style scoped>
.tem-left {
    text-align: left
}
.demo-icon-vue {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("../assets/Vue.png") center no-repeat;
}
.demo-icon-java {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("../assets/java.png") center no-repeat;
}
.demo-icon-zjj {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("../assets/zjj.png") center no-repeat;
}
.demo-icon-redis {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("../assets/redis.png") center no-repeat;
}
.demo-icon-mq {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("../assets/mqs.png") center no-repeat;
}
.demo-icon-activemq {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("../assets/activemq.png") center no-repeat;
}
.demo-icon-rabbitmq {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("../assets/rabbitmq.png") center no-repeat;
}
.demo-icon-rocketmq {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("../assets/rocketmq.png") center no-repeat;
}
.demo-icon-kafka {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("../assets/kafka.png") center no-repeat;
}
.demo-icon-javascript {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("../assets/javascript.png") center no-repeat;
}
</style>


